<template>
  <div >
    <el-table
      :cell-style="{'text-align':'center'}"
      :header-cell-style="{'text-align':'center'}"
      stripe
      border
      size="mini"
      :data="tableData.filter(data => !search || data.user_name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      height="95vh"
    >
      <el-table-column
        label="用户ID"
        width="80"
        prop="user_id">
      </el-table-column>
      <el-table-column
        label="用户账号"
        width="120"
        prop="user_account">
      </el-table-column>
      <el-table-column
        label="用户名称"
        width="150"
        prop="user_name">
      </el-table-column>

      <el-table-column
        label="权限"
        width="100"
        prop="user_header">
        <template slot-scope="scope">
          <el-tag effect="plain" :type="scope.row.jurisdiction==='4'?'info':scope.row.jurisdiction==='1'?'':scope.row.jurisdiction==='2'?'success':'danger'">
            {{ scope.row.jurisdiction==='4'?'黑名单':scope.row.jurisdiction==='1'?'普通用户':scope.row.jurisdiction==='2'?'加权用户':'管理员'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="用户头像"
        width="80"
        prop="user_header">
        <template slot-scope="scope">
          <img :src="scope.row.user_header" width="50px" alt="">
        </template>
      </el-table-column>
      <el-table-column
        label="用户性别"
        width="80"
        prop="sex">
      </el-table-column>
      <el-table-column
        label="访问量"
        width="80"
        prop="page_view">
      </el-table-column>
      <el-table-column
        label="点赞量"
        width="80"
        prop="like_num">
      </el-table-column>
      <el-table-column
        label="用户个签"
        width="200"
        prop="personalized_signature">
      </el-table-column>
      <el-table-column
        label="个人简介"
        width="200"
        prop="self_introduction">
      </el-table-column>
      <el-table-column
        width="150"
        align="right"
        fixed="right">
        <template slot="header" >
          编辑
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          <div>
            <el-popover
              placement="left-start"
              trigger="click">
              <div>
                <el-select v-model="scope.row.jurisdiction" placeholder="请选择" size="mini" @change="userEditor(scope.row.jurisdiction,scope.row.user_id,)">
                  <el-option value="1" label="普通用户"> </el-option>
                  <el-option value="2" label="加权用户"> </el-option>
                  <el-option value="3" label="管理员"> </el-option>
                  <el-option value="4" label="黑名单"> </el-option>
                </el-select>
              </div>
              <el-button
                slot="reference"
                size="mini"
              >修改权限</el-button>
            </el-popover>

          </div>
          <div class="mt-1">
            <el-button
              size="mini"
              type="danger"
              @click="handleDeluser(scope.row.user_id,scope.$index, tableData)">删除用户</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  data() {
    return {
      search: '',
      getUserListStore: this.newStore(),
      refuseStore: this.newStore(),
      userEditorStore: this.newStore(),
      userDelStore: this.newStore(),
      num: 105,
      page: 0,
      tableData: [],
      jurisdiction: 1,
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    userEditor(value, id) {
      this.spost(this.userEditorStore, '/Admin/userEditor', { jurisdiction: value, id }).then(() => {
        this.$message.success('授权成功！');
      });
    },
    handleDeluser(id, index, rows) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示:删除用户", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        lockScroll: false,
        type: "warning",
      })
        .then(() => {
          this.spost(this.userDelStore, "/Admin/delUser", {
            user_id: id,
          }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            rows.splice(index, 1);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getUserList() {
      this.spost(this.getUserListStore, '/Admin/getUserList', { num: this.num, page: this.page }).then((res) => {
        this.tableData = res.d.UserList;
      });
    },
  },
};
</script>

<style scoped lang="scss">

</style>
